<template>
  <div class="list bg-white px-3 mb-0">
    <!-- 回到商品列表页 -->
    <router-link :to="{ name: 'shop_goods_list' }" class="reGoodsList">
      <el-button type="primary" size="medium" plain>返回商品列表</el-button>
    </router-link>
    <el-tabs v-model="tabIndex" @tab-click="handleClick">
      <el-tab-pane label="基础设置">
        <!-- 创建商品基础属性区域 -->
        <BaseCreate></BaseCreate>
        <!-- /创建商品基础属性区域 -->
      </el-tab-pane>
      <el-tab-pane label="商品规格">
        <!-- 规格选项 -->
        <el-form label-width="80px">
          <el-form-item class="mb-0" label="商品规格">
            <el-radio-group
              :value="skus_type"
              @input="vModel('skus_type', $event)"
              size="mini"
            >
              <el-radio-button :label="0">单一规格</el-radio-button>
              <el-radio-button :label="1">多规格</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <!-- 单规格属性 -->
        <template v-if="skus_type === 0">
          <SingleAttrs></SingleAttrs>
        </template>
        <!-- /单规格属性 -->
        <!-- 多规格属性 -->
        <template v-else>
          <el-form ref="form" label-width="80px">
            <el-form-item label="添加规格">
              <SkuCard
                v-for="(item, index) in sku_card"
                :key="index"
                :item="item"
                :index="index"
                :total="skuCardTotal"
              ></SkuCard>
              <div>
                <el-button size="mini" type="success" @click="addSkuCard"
                  >添加规格</el-button
                >
              </div>
            </el-form-item>
          </el-form>
          <el-form ref="form" label-width="80px">
            <el-form-item label="批量设置">
              <template v-if="!setAllStatus">
                <el-button
                  type="text"
                  v-for="(btn, btnIndex) in btnList"
                  :key="btnIndex"
                  @click="setAll(btn)"
                >
                  {{ btn.name }}
                </el-button>
              </template>
              <div v-else class="d-flex align-items-center">
                <el-input
                  size="mini"
                  type="number"
                  style="width: 150px"
                  :placeholder="current"
                  v-model="updateAll"
                >
                </el-input>
                <el-button type="primary" size="mini" @click="updateAllSubmit"
                  >设置</el-button
                >
                <el-button type="defult" size="mini" @click="cancelSetAll"
                  >取消</el-button
                >
              </div>
            </el-form-item>
            <el-form-item label="规格设置">
              <SkuTable ref="table"></SkuTable>
            </el-form-item>
          </el-form>
        </template>
        <!-- /多规格属性 -->
      </el-tab-pane>
      <el-tab-pane label="商品属性">
        <el-form label-width="80px">
          <el-form-item label="商品类型">
             <el-select :value='goods_type_id' placeholder="请选择" @input="vModel('goods_type_id', $event)">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
             </el-select>
          </el-form-item>
        </el-form>
        <div class="card">
          <div class="card-header">
            标题
          </div>
          <div class="card-body">
            <el-form ref="form" style="width:500px">
              <el-form-item label="手机型号" label-width="70px">
                <el-input :value="goods_attrs.phone_model" @input="vModelGoodsAttr({
                  key:'phone_model',value:$event})" size="mini" placeholder="请输入手机型号"></el-input>
              </el-form-item>
            </el-form>
          </div>
      </div>
      </el-tab-pane>
      <el-tab-pane label="媒体设置">
        <el-form label-width="80px">
          <el-form-item label="商品大图">
            <div class="d-flex flex-wrap">
              <div class="border rounded d-flex align-items-center justify-content-center mr-3 mb-3 position-relative" style="height: 150px; width: 150px; cursor: pointer" v-for="(item,index) in banners" :key="index">
                <img v-if="item.url" :src="item.url" style="width:100%;height:100%" @click="replace(index)">
                <i v-else class="el-icon-plus text-muted" style="font-size: 30px"></i>
                <i class="el-icon-delete position-absolute text-white p-1" style="top:0;right:0;background-color:rgba(0,0,0,0.5)" @click.stop='deleteImage(index)'></i>
              </div>
              <div v-if="banners.length < 9" class="border rounded d-flex align-items-center justify-content-center mr-3 mb-3" style="height: 150px; width: 150px; cursor: pointer" @click="choose">
                <i class="el-icon-plus text-muted" style="font-size: 30px"></i>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="商品详情">
        <TinyMce ref="editor" v-model="msg" @onClick="onClick"></TinyMce>
      </el-tab-pane>
      <el-tab-pane label="折扣设置">
        <el-form label-width="80px">
          <el-form-item label="会员价">
            <el-input :value="discount" @input="vModel('discount', $event)" style="width:200px">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import BaseCreate from "@/components/shop/create/base-create";
import SingleAttrs from "@/components/shop/create/single-attrs.vue";
import SkuCard from "@/components/shop/create/sku/sku-card.vue";
import SkuTable from "@/components/shop/create/sku/sku-table.vue";
import TinyMce from "@/components/common/tinymce.vue";
export default {
  data() {
    return {
      tabIndex: 0,
      msg: "欢迎来到富文本编辑器",
      current: "",
      btnList: [
        {
          name: "销售价",
          key: "pprice",
        },
        {
          name: "市场价",
          key: "oprice",
        },
        {
          name: "成本价",
          key: "cprice",
        },
        {
          name: "库存",
          key: "stock",
        },
        {
          name: "体积",
          key: "volume",
        },
        {
          name: "重量",
          key: "weight",
        },
      ],
      setAllStatus: false,
      updateAll: "",
    };
  },
  mounted() {},
  inject: ["app"],
  components: {
    BaseCreate,
    SingleAttrs,
    SkuCard,
    SkuTable,
    TinyMce,
  },
  props: {},
  created() {},
  computed: {
    ...mapState({
      sku_card: (state) => state.goods_create.sku_card,
      skus_type: (state) => state.goods_create.skus_type,
      banners: state => state.goods_create.banners,
      goods_type_id: state => state.goods_create.goods_type_id,
      goods_attrs: state => state.goods_create.goods_attrs,
      discount: state => state.goods_create.discount
    }),
    //  sku_card总长度
    skuCardTotal() {
      return this.sku_card.length;
    },
    // 剩余可以选择的图片张数
    count() {
      return 9 - this.banners.length
    }
  },
  watch: {},
  methods: {
    // 调用vModel方法
    ...mapMutations(["addSkuCard", "vModelState", 'vModelGoodsAttr']),
    deleteImage(index) {
      this.$confirm('是否删除该图片?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let list = [...this.banners]
      list.splice(index,1)
      this.vModel("banners", list)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          }); 
      }); 
    },
    replace(index) {
      this.app.chooseImage((res) => {
        // 不能直接修改banners 需要通过定义一个数组 对数组进行修改后再赋值
        let list = [...this.banners]
        list[index] = res[0]
        this.vModel("banners", list)
      }, 1);
    },
    choose() {
      // 接收image-dialog传来的chooselist数组，即res就是chooselist
      this.app.chooseImage((res) => {
        let list = [...this.banners, ...res]
        this.vModel("banners", list)
      }, this.count);
    },
    updateAllSubmit() {
      let index = this.btnList.findIndex((v) => v.name === this.current);
      let key = this.btnList[index].key;
      this.$refs.table.list.forEach((v) => {
        v[key] = this.updateAll;
      });
      this.setAllStatus = false;
      this.updateAll = "";
    },
    setAll(btn) {
      this.setAllStatus = true;
      this.current = btn.name;
    },
    cancelSetAll() {
      this.setAllStatus = false;
      this.updateAll = "";
    },
    onClick(e, editor) {
      console.log(e, editor);
    },
    // 修改表单的值
    vModel(key, value) {
      this.vModelState({ key, value });
    },
    //   加载数据
    handleClick() {
      // console.log(this.tabIndex);
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  margin: -20px;
  margin-top: -8px;
  background-color: white;
}
.reGoodsList {
  position: absolute;
  top: 10px;
  right: 50px;
}
</style>
